<template>
  <div class="container">
    <p class="title">{{ tabs.title }}</p>
    <div class="infomations" v-for="(filterName, nIndex) in tabs.names" :key="nIndex">
      <p
        class="name"
        :class="{
          isSelect: tabs.currentSelect == filterName.id
        }"
        @click="selectTab(filterName)"
      >
        #{{ filterName.name }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
type FilterName = {
  id?: number | any
  name: string
  title: string
}
const props = defineProps<{ tabs: any }>()
const emits = defineEmits(['select'])
const selectTab = (filterName: FilterName) => {
  if (props.tabs.currentSelect == filterName.id) {
    console.log(props.tabs.currentSelect)

    props.tabs.currentSelect = -1
  } else {
    props.tabs.currentSelect = filterName.id
  }
  let payload = {
    title: props.tabs.title,
    name: filterName.name,
    id: props.tabs.currentSelect
  }
  emits('select', payload)
}
</script>

<style lang="less" scoped>
.container {
  user-select: none;
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
  }
  .infomations {
    margin-top: 27px;
    .name {
      cursor: pointer;
      font-size: 20px;
      font-weight: 400;
      color: #252525;
      margin-top: 27px;
    }
    .isSelect {
      color: #0075ff;
    }
  }
}
</style>
